<template>
  <div class="course-detail">
    <div class="video">
      <video
        class="b-player-video"
        src="https://vdse.bdstatic.com/5f053e7c69732ea2712756925352e327.mp4?authorization=bce-auth-v1%2Ffb297a5cc0fb434c971b8fa103e8dd7b%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F65e9ab7bd2e3973c2efcc2cac183f9643aee09005c5f3cb2d9570f98d5f4faa1"
        type="video/mp4"
        :poster="postPIc"
        preload="none"
        height="100%"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="true"
        :controls="controls"
        id="video"
      ></video>
      <div class="play-btn-box" @click="playClick" v-if="isShowPlayBtn">
        <img src="../assets/images/bofang.png" alt="">
        <span>点击播放</span>
      </div>
    </div>
    <div class="video-info">
      <img src="../assets/images/detail1.png" alt>
      <div class="video-info-right">
        <h2>自然拼读</h2>
        <p>已报45678人 · 进行中 · 支持回放</p>
      </div>
    </div>
    <div class="course-con">
      <div class="con-header">课程内容</div>
      <div class="play-box">
        <img :src="nowPlayBtnStatus" alt @click="playClick">
        <div class="play-right">
          <h4>如何破解课堂“神游”功</h4>
          <div class="play-rate">
            <img src="../assets/images/detail3.png" alt="" class="now-progress">
            <p class="progress" @click="drage"></p>
            <p class="play-progress"></p>
          </div>
          <div class="play-time">
            <span>{{playTime}}</span>
            <span>{{totalPlayTime}}</span>
          </div>

        </div>
      </div>
      <div class="intrduce">
        <img src="../assets/images/detail2.png" alt>
        <div class="listen-know">
          <p>听课须知</p>
          <p>1、请您在观看课程中确保手机没有静音，点击播放按钮即可观看课程；</p>
          <p>2、观看课程过程中出现卡顿或加载不出来，点击返回再重新进入即可；</p>
        </div>
      </div>
    </div>
    <!-- 互动讨论 -->
    <div class="interaction">
      <div class="interaction-header">互动讨论</div>
      <div class="interaction-list">
        <ul>
          <li v-for="(item,index) in discussionList" :key="item.id">
            <img :src="item.userHeadPic" alt class="user-head">
            <div class="interaction-list-right">
              <h3 class="nickname">{{item.nickname}}</h3>
              <p class="public-con">{{item.leaveWord}}</p>
              <div class="time-and-other">
                <p class="time">{{item.time}}</p>
                <div class="other">
                  <div class="like" @click="like(index)">
                     <img v-if="item.isLike" src="../assets/images/dianzan.png" alt>
                    <img v-else src="../assets/images/detail5.png" alt>
                    <span>点赞</span>
                  </div>
                  <div class="comment">
                    <img src="../assets/images/detail4.png" alt>
                    <span>评论</span>
                  </div>
                </div>
              </div>
              <div class="like-person">
                <img src="../assets/images/dianzan.png" alt>
                <span
                  class="like-person-name"
                >王小贱，赵晓梦，Susan，王小贱，赵晓梦，赵晓梦，Susan，王小贱，赵晓梦，Susan，王王小贱，赵晓梦，王小贱，梦，</span>
                <strong>等18人觉得很赞</strong>
                <div class="comment-list">
                  <ul>
                    <li>
                      <span class="comment-name">立花花：</span>
                      <span
                        class="clmment-con"
                      >加油！True mastery of any skill takes a lifetime.对任何技能的掌握都需要一生的刻苦操练</span>
                    </li>
                 
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="leave-input">
        <input type="text" placeholder="参加互动讨论">
        <button>留言</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      discussionList: [
        {
          userHeadPic: require("../assets/images/pic1.jpg"),
          nickname: "坦然面对",
          leaveWord:
            "True mastery of any skill takes a lifetime.对任何技能的掌握都需要一生的刻苦操练",
          time: "2019-6-1 12:02:56",
          isLike:false
        },
        {
          userHeadPic: require("../assets/images/pic1.jpg"),
          nickname: "坦然面对",
          leaveWord:
            "True mastery of any skill takes a lifetime.对任何技能的掌握都需要一生的刻苦操练",
          time: "2019-6-1 12:02:56",
          isLike:true
        }
      ],
      nowPlayBtnStatus:require('../assets/images/playBtn1.png'),
      playIng:require('../assets/images/playing.png'),
      playStop:require('../assets/images/playBtn1.png'),
      playTime:'00:00',
      totalPlayTime:'00:00:00',
      controls:false,
      postPIc:require('../assets/images/pic3.png'),
      isShowPlayBtn:true
    }
 
  },
  mounted() {

  },
     methods:{
       like (index) {
         console.log(index)
         this.discussionList[index]['isLike'] = !this.discussionList[index]['isLike']
       },
      playClick () {

        var video = document.getElementById('video')
          if (video.paused == true) {
            video.play();
           this.nowPlayBtnStatus = this.playIng
           this.isShowPlayBtn = false
        } else {
            video.pause();
            this.isShowPlayBtn = true
             this.nowPlayBtnStatus = this.playStop
        }
        var that = this
        console.log(video.duration)
        
        video.ontimeupdate = function() {
        var percent = video.currentTime / video.duration * 100 + "%";
        var imgpercent = (video.currentTime / video.duration * 100) -2 +'%';
        document.querySelector(".play-progress").style.width = percent;
        document.querySelector(".now-progress").style.left = imgpercent;
        console.log(video.ended)
        if (video.ended) {
          that.nowPlayBtnStatus = that.playStop
        }
        that.playTime = that.timeFormat(video.currentTime)
         that.totalPlayTime = that.timeFormat(video.duration)
       
    }

      },
      timeFormat (value) {
        var secondTime = parseInt(value);// 秒
        var minuteTime = 0;// 分
        var hourTime = 0;// 小时
        if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
            //获取分钟，除以60取整数，得到整数分钟
            minuteTime = parseInt(secondTime / 60);
            //获取秒数，秒数取佘，得到整数秒数
            secondTime = parseInt(secondTime % 60);
            //如果分钟大于60，将分钟转换成小时
            if(minuteTime > 60) {
                //获取小时，获取分钟除以60，得到整数小时
                hourTime = parseInt(minuteTime / 60);
                //获取小时后取佘的分，获取分钟除以60取佘的分
                minuteTime = parseInt(minuteTime % 60);
            }
        }
        var second = "" + parseInt(secondTime);
        var min="0"
        var hour="0"
        if(minuteTime > 0) {
            min = "" + parseInt(minuteTime);
        }
        if(hourTime > 0) {
            hour = "" + parseInt(hourTime);
        }

        var result = this.zeroTime(hour) + ':' + this.zeroTime(min) + ":" + this.zeroTime(second)
        return result
      },
      zeroTime (n) {
        if (n<10) {
          n = '0'+n
        }
        return n
      },
      drage (target) {
         var video = document.getElementById('video')
         var width =  document.querySelector(".progress").offsetWidth;
        //拿到当前点击位置的x坐标
        var x = target.offsetX;
 
        //比如说我的视频的总时长是60分钟， 当前时间 60 * x/width
        video.currentTime = x / width * video.duration;
        console.log(video.currentTime)
      }
    }
};
</script>
<style lang="scss" scoped>
.video {
  position: relative;
  video {
    width: 100%;
    height: 4.19rem;
  }
}
.video-info {
  background: #fff;
  padding-top: 0.3rem;
  padding-bottom: 0.2rem;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  font-family: "微软雅黑";
  padding-left: 0.4rem;
  margin-bottom: 0.3rem;
  img {
    width: 0.68rem;
    height: 0.68rem;
    margin-right: 0.25rem;
  }
  .video-info-right {
    h2 {
      font-size: 0.32rem;
      color: #333;
      margin-bottom: 0.1rem;
    }
    p {
      font-size: 0.24rem;
      color: #999;
    }
  }
}
.course-con {
  background: #fff;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  .con-header {
    font-size: 0.36rem;
    font-weight: bold;
    color: #333;
    padding-top: 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .intrduce {
    min-height: 5rem;
    text-align: center;
    img {
      max-width: 100%;
    }
    .listen-know {
      margin-top: 0.3rem;
      p {
        font-size: 0.28rem;
        color: #333;
        line-height: 170%;
        text-align: left;
        font-family: "微软雅黑";
        letter-spacing: 1px;
      }
    }
  }
}
.interaction {
  font-family: "微软雅黑";
  background: #fff;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  .interaction-header {
    font-size: 0.36rem;
    font-weight: bold;
    color: #333;
    padding-top: 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .interaction-list {
    margin-top: 0.4rem;
    ul {
      li {
        display: flex;
        display: -webkit-flex;
        margin-bottom: 0.4rem;
        img.user-head {
          width: 0.82rem;
          height: 0.82rem;
          border-radius: 50%;
          margin-right: 0.18rem;
        }
        .interaction-list-right {
          border-bottom: 1px solid #e5e5e5;
          padding-bottom: 0.4rem;
          flex: 1;
          -webkit-flex: 1;
          &:last-of-type {
            border: 0;
          }
          h3.nickname {
            font-size: 0.32rem;
            color: #333;
            font-weight: bold;
          }
          p.public-con {
            font-size: 0.28rem;
            color: #333;
            margin-bottom: 0.35rem;
          }
          .time-and-other {
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            .time {
              font-size: 0.2rem;
              color: #999;
                  padding-top: .08rem;
            }
            .other {
              display: flex;
              display: -webkit-flex;
              .like {
                margin-right: 0.3rem;
                img {
                  width: 0.27rem;
                  height: 0.27rem;
                }
                span {
                  font-size: 0.24rem;
                  color: #666;
                  vertical-align: middle;
                }
              }
              .comment {
                img {
                  width: 0.26rem;
                  height: 0.24rem;
                }
                span {
                  font-size: 0.24rem;
                  color: #666;
                  vertical-align: middle;
                }
              }
            }
          }
          .like-person {
            background: #f7f7f7;
            border-radius: 0.3rem;
            min-height: 2rem;
            padding: 0.3rem;
            margin-top: 0.2rem;

            img {
              width: 0.27rem;
              height: 0.27rem;
            }
            span.like-person-name {
              vertical-align: middle;
              color: #ff6422;
              font-size: 0.24rem;
            }
            strong {
              font-size: 0.24rem;
              color: #333333;
            }
            .comment-list {
              margin-top: 0.1rem;
              ul {
                li {
                  margin-bottom: 0.16rem;
                  display: flex;
                  display: -webkit-flex;
                  .comment-name {
                    font-size: 0.24rem;
                    color: #ff6422;
                  }
                  .clmment-con {
                    font-size: 0.24rem;
                    color: #333;
                    flex: 1;
                    -webkit-flex: 1;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.play-box {
  background: #fffaf7;
  height: 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid #ffeee7;
  margin: 0.4rem auto;
  display: flex;
  display: -webkit-flex;
  padding:0 .30rem;
 
  img {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: .18rem;
    margin-top: .18rem;
  }
  .play-right {
    flex: 1;
    -webkit-flex: 1;
    margin-top: .10rem;
    // display: flex;
    // display: -webkit-flex;
    // -webkit-align-items: center;
    // flex-direction: column;
    text-align: left;
    h3 {
      font-size: 0.28rem;
      color: #333;
    }
    .play-rate {
      position: relative;
          top: -.10rem;
      img.now-progress {
        width: .29rem;
        height: .29rem;
        position: absolute;
        top:-.30rem;
        left:-.10rem;
        z-index: 100;
      }
      p.progress {
        height: .04rem;
        background: #ffdbca;
        border-radius: .04rem;
        margin-top: .24rem;
      }
      .play-progress {
          height: .04rem;
        background: #ff6422;
        border-radius: .04rem;
         position: absolute;
        top:-0;
        left:0;
        z-index: 100;
        width: 0;
      }
    }
    .play-time {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
          margin-top: .08rem;
      span {
        color: #999;
        font-size: .24rem;
      }
    }
  }
}
.play-btn-box {
  height: .80rem;
  width: 2.38rem;
  background: rgba(0, 0, 0, .6);
  border-radius: .40rem;
  position: absolute;
  left: 50%;
  margin-left: -1.19rem;
  top:90%;
  margin-top: -2.1rem;
  z-index: 100;
  line-height: .75rem;
  img {
    width: .25rem;
    height: .29rem;
    // margin-top: .25rem;
    margin-left: .44rem;
  }
  span {
    color: #fff;
    font-size: .32rem;
    vertical-align: middle;
    position: relative;
    top:0;
  
  }
}
.leave-input {
  display: flex;
      display: -webkit-flex;
  input {
    flex: 1;
    -webkit-flex:1;
    height: .80rem;
    background: #e1e2e4;
    font-size: .28rem;
    color: #999;
    border-radius: .4rem;
    border:0;
    text-indent: .30rem;
    vertical-align: middle;
  }
  button {
    border:0;
    color: #ff6422;
    font-size: .32rem;
    &:active {
      opacity: .8;
    }
  }
}
</style>
